<template>
  <div class="homeBox">
    <div class="advertSpace">
      <div class="userInfoCard">
        <div class="avatar" :style="{backgroundImage:'url('+ avatar +')'}" />
        <div class="infoList">
          <p>{{ getTimeState() + name }}</p>
        </div>
      </div>

      <div class="carousel">
        <el-carousel height="180px">
          <el-carousel-item v-for="(item, index) in carouselList" :key="index">
            <div class="carousel-card">
              <h3>{{ item.describe }}</h3>
              <img :src="baseUrl + item.imgurl" alt="">
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <!-- 公告 -->
    <div v-if="showAnnounce" class="announce">
      <svg-icon icon-class="announce" font-size="28px" />

      <Marquee class="realData">
        <span v-for="(item, index) in announceList" :key="index">
          <i class="el-icon-message-solid" />
          {{ item.noticeTitle }}
        </span>
      </Marquee>

      <i class="el-icon-close" @click="showAnnounce = false" />
    </div>

    <div class="funcBlock">
      <div class="data-label">
        <PanelGroup />
      </div>
    </div>

    <div class="chartsArea">
      <div class="taskChart">
        <LineChart :chart-data="taskChartData" line-name="任务状态统计图表" class-name="task" />
      </div>

      <div class="projectChart">
        <LineChart :chart-data="projectChartData" line-name="项目状态统计图表" class-name="project" />
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getTaskStatistics, getProjectStatistics } from '@/api/home/index'
import { listCarousel } from '@/api/home/carousel'
import { listNotice } from '@/api/system/notice'
import LineChart from './dashboard/LineChart'
import PanelGroup from './dashboard/PanelGroup'
import marquee from '@/components/marquee'

export default {
  components: {
    LineChart,
    PanelGroup,
    marquee
  },

  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      showAnnounce: true,
      announceList: [],
      taskChartData: [],
      projectChartData: [],
      carouselList: []
    }
  },

  computed: {
    ...mapGetters([
      'avatar',
      'name'
    ])
  },

  created() {
    this.initData()
  },

  methods: {
    initData() {
      listCarousel().then(res => {
        console.log('轮播图数据', res)
        this.carouselList = res.rows
      })

      getTaskStatistics().then(res => {
        console.log('任务统计数据', res)
        this.taskChartData = res.data
      })

      getProjectStatistics().then(res => {
        console.log('项目统计数据', res)
        this.projectChartData = res.data
      })

      listNotice().then(res => {
        console.log('公告列表', res)
        this.announceList = res.rows.filter(val => {
          return val.noticeType === '2' && val.status === '0'
        })
        this.showAnnounce = this.announceList.length > 0

        const list = res.rows.filter(val => {
          return val.noticeType === '1' && val.status === '0'
        })
        if (list.length > 0) {
          let num = 0
          const interval = setInterval(() => {
            this.$notify.warning({
              title: '通知',
              message: list[num].noticeTitle,
              duration: 3000 + 1500 * num,
              offset: 50
            })
            num++
            if (num >= list.length) {
              clearInterval(interval)
            }
          }, 200)
        }
      })
    },

    getTimeState() {
      // 获取当前时间
      const timeNow = new Date()
      // 获取当前小时
      const hours = timeNow.getHours()
      // 设置默认文字
      let state = ``
      // 判断当前时间段
      if (hours >= 0 && hours <= 10) {
        state = `早上好！`
      } else if (hours > 10 && hours <= 14) {
        state = `中午好！`
      } else if (hours > 14 && hours <= 18) {
        state = `下午好！`
      } else if (hours > 18 && hours <= 24) {
        state = `晚上好！`
      }
      return state
    }
  }
}
</script>

<style scoped lang="scss">
  .homeBox {
    padding: 0;

    .advertSpace {
      width: calc(100% - 40px);
      height: 200px;
      margin: 20px;
      border-radius: 20px;
      -webkit-box-shadow: #dcdfe6 0px 0px 10px;
      -moz-box-shadow: #dcdfe6 0px 0px 10px;
      box-shadow: #dcdfe6 0px 0px 10px;
      background: #fff;
      // background: url("../assets/images/advert1.png") no-repeat;
      // background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .userInfoCard {
        display: flex;
        align-items: center;

        .avatar {
          width: 100px;
          height: 100px;
          border: 1px solid #f4f4f5;
          border-radius: 100px;
          margin: 20px;
          background-size: 100% 100%;
        }
      }

      .carousel {
        width: 400px;
        margin: 0 18px;

        .carousel-card {
          width: 100%;
          height: 180px;
          position: relative;

          h3 {
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin: 0;
            position: absolute;
            top: 65px;
            color: #fff;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .announce {
      margin: 0 20px;
      border: 1px solid #ffcc45;
      background:rgba(255,204,69,0.2);
      display: flex;
      align-items: center;

      span {
        padding-right: 50px;

        i {
          color: #ffba00;
        }
      }

      .svg-icon {
        margin: 5px 10px;
      }

      .el-icon-close {
        margin: 0 10px;
        cursor: pointer;

        &:hover{
          color: red;
        }
      }
    }

    .funcBlock {
      display: flex;
      justify-content: space-between;
      margin: 12px 20px;

      .data-label {
        width: calc(100% - 0px);
      }
    }

    .chartsArea {
      display: flex;

      .taskChart {
        width: 50%;
      }

      .projectChart {
        width: 50%;
      }
    }
  }
</style>
